import * as echarts from 'echarts'
const getArrByKey = (f, k) => {
    const key = k || 'value';
    const res = [];
    if (f) {
        f.forEach((t) => {
            res.push(t[key]);
        });
    }
    return res;
};

export default (element,data1,self) => {
    const dataArr = data1.length > 0 ? data1 : [

    ]
    let total = 0;
    dataArr.map(res=>{
        total = total + res.zs
    })
    const data = dataArr.map((item) => ({
        name: item.executeOorgname,
        value: item.zs,
        total,
    }));
    let title = self.$attrs.title
    const old = echarts.getInstanceByDom(element);
    if (old) old.dispose();
    const chart = echarts.init(element, 'theme');
    chart.setOption({
        tooltip:{},
        grid: {
            top: 0,
            bottom: -15,
            right: 0,
            left: -40,
            containLabel: true,
        },
        xAxis: { show: false },
        yAxis: [
            {
                triggerEvent: true,
                show: true,
                inverse: true,
                data: getArrByKey(data, 'name'),
                axisLine: { show: false },
                splitLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                    show: true,
                    interval: 0,
                    // color: '#fff',
                    align: 'left',
                    margin: 60,
                    formatter(value) {
                        return `{title|${value}}`;
                    },
                    rich: {
                        title: {
                            width: 50,
                            align: 'right',
                            fontSize: 14,
                            color:'#fff',
                            fontFamily: 'Source Han Sans CN',
                        },
                    },
                },
            },
            {
                triggerEvent: true,
                show: true,
                inverse: true,
                data: getArrByKey(data, 'name'),
                axisLine: { show: false },
                splitLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                    interval: 0,
                    // shadowOffsetX: '-20px',
                    // color: ['#fff'],
                    align: 'left',
                    verticalAlign: 'center',
                    fontFamily: 'DIN',
                    lineHeight: 18,
                    fontSize: 20,
                    color:'#3BD6AC',
                    rich: {
                        title: {
                            width: 20,
                            align: 'right',
                            fontSize: 14,
                            color:'#fff',
                            fontFamily: 'Source Han Sans CN',
                        },
                    },
                    formatter(value, index) {
                        let txt = title || '个'
                        return `${data[index].value}`;
                    },
                },
            },
        ],
        series: [
            {
                name: title,
                type: 'bar',
                showBackground: false,
                // backgroundStyle: { color: 'rgba(255, 255, 255, 0.06)' },
                yAxisIndex: 0,
                data,
                barWidth: 20,
                // align: left,
                itemStyle: {
                    // borderRadius: [0, 5, 5, 0],
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        {
                            offset: 0,
                            color: '#3BD6AC',
                        },
                        {
                            offset: 1,
                            color: 'rgba(59, 214, 172, 0)',
                        },
                    ]),

                },
            },
        ],
    });
    return chart
};
